<template>
  <view class="home">
    <!-- 小程序头部兼容 -->
    <!-- #ifdef MP -->
    <navigator class="mp-search-box" url="/pages/search/index">
      <input
        class="ser-input"
        type="text"
        value="请输入书名，如：花开半夏"
        disabled
      />
    </navigator>
    <!-- #endif -->
    <!-- banner -->
    <Banner />
    <!-- 分类 -->
    <Cate />
    <!-- 图片广告 -->
    <Advisement />
    <!-- 图片推荐 -->
    <Images />
    <!-- 主题 -->
    <Themes v-if="!isOpenHideMode" />
    <!-- 滚动墙 -->
    <BookFlow v-if="!isOpenHideMode" ref="flow" />
    <!-- 页面footer -->
    <PageFooter />
  </view>
</template>

<script>
import { setTitleNViewStyle, get } from '@/utils';
import PageFooter from '../../components/PageFooter';
import Banner from './components/Banner';
import Cate from './components/Cate';
import Advisement from './components/Advisement';
import Images from './components/Images';
import Themes from './components/Themes';
import BookFlow from './components/BookFlow';
import { mapGetters } from 'vuex';
import { platformName } from '../../config';

export default {
  components: {
    Banner,
    Cate,
    Advisement,
    Images,
    Themes,
    BookFlow,
    PageFooter,
  },

  data() {
    return {
      notices: [],
    };
  },

  computed: {
    ...mapGetters(['userInfo', 'hasLogin', 'settings']),
    isOpenHideMode() {
      return (
        get(this.settings, 'is_open_hide_mode', false) &&
        platformName === 'mp-weixin'
      );
    },
  },

  onLoad(params) {
    // 30s 后获取通知列表，刷新首页通知提醒
    this.fetchNoticeTips();
  },

  onShow() {
    // 页面再展示的时候刷新通知提醒
    this.flushNoticeTips();
  },

  // #ifndef MP
  // 标题栏input搜索框点击
  onNavigationBarSearchInputClicked: async function (e) {
    uni.navigateTo({ url: '/pages/search/index' });
  },

  //点击导航栏 buttons 时触发
  onNavigationBarButtonTap(e) {
    const index = e.index;
    if (index === 0) {
      uni.navigateTo({ url: '/pages/classify/index' });
    } else if (index === 1) {
      // #ifdef APP-PLUS
      const pages = getCurrentPages();
      const page = pages[pages.length - 1];
      const currentWebview = page.$getAppWebview();
      currentWebview.hideTitleNViewButtonRedDot({
        index,
      });
      // #endif
      uni.navigateTo({
        url: '/sub-packages/notice/index',
      });
    }
  },
  // #endif

  onShareAppMessage(res) {
    const shareCodeParams =
      this.hasLogin && this.userInfo.shareCode
        ? `?share_code=${`${this.userInfo.shareCode}|${Date.now()}`}`
        : '';
    return {
      title: `快来一起领阅读币~`,
      path: `/sub-packages/share/index${shareCodeParams}`,
      imageUrl:
        'https://picture-1256514897.file.myqcloud.com/book/images/share-mp-weixin.png',
    };
  },

  // 页面滚动到底部
  onReachBottom() {
    // 滚动墙加载更多书籍数据
    this.$refs.flow && this.$refs.flow.loadMoreData();
  },

  methods: {
    fetchNoticeTips() {
      return this.$http({
        method: 'GET',
        url: '/api/front/notice/flush',
        needAuth: true,
        skipToast: true,
      }).then((res) => {
        if (res.ok) {
          const notices = res.data.list.map((item) => item._id);
          const readNotices = uni.getStorageSync('hasReadNotices') || [];
          const notReadNotices = notices.filter(
            (item) => readNotices.indexOf(item) < 0
          );
          if (notReadNotices.length > 0) {
            setTitleNViewStyle(1, true);
          }
          this.notices = notices;
        }
      });
    },

    flushNoticeTips() {
      const readNotices = uni.getStorageSync('hasReadNotices') || [];
      const notReadNotices = this.notices.filter(
        (item) => readNotices.indexOf(item) < 0
      );
      if (notReadNotices.length > 0) {
        setTitleNViewStyle(1, true);
      } else {
        setTitleNViewStyle(1, false);
      }
    },
  },
};
</script>

<style lang="scss">
/* #ifdef MP */
.mp-search-box {
  position: absolute;
  left: 0;
  top: 30rpx;
  z-index: 9999;
  width: 100%;
  padding: 0 80rpx;
  .ser-input {
    flex: 1;
    height: 56rpx;
    line-height: 56rpx;
    text-align: center;
    font-size: 28rpx;
    color: $font-color-base;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.6);
  }
}
/* #endif */

.margin-top {
  margin-top: 16rpx;
}
</style>
